<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>注册</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta name="format-detection" content="telephone=no">
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp" />

		<link rel="stylesheet" href="/static/home/AmazeUI-2.4.2/assets/css/amazeui.min.css" />
		<link href="/static/home/css/dlstyle.css" rel="stylesheet" type="text/css">
		<script src="/static/home/AmazeUI-2.4.2/assets/js/jquery.min.js"></script>
		<script src="/static/home/AmazeUI-2.4.2/assets/js/amazeui.min.js"></script>
		<style>
			.cur{
				/*border:1px solid red;*/
				color:red;
				font-weight:bold;
			}
			.good{
				color:green;
				font-weight:bold;
			}
			.tel{
				border:1px solid red;
				width:100px;
				height:30px;	
			}
			#zhuce{
				width:200px;
			}
			.tishi{
				position: relative;
				left: 210px;
				top: -30px;
				z-index:999px;
				/*width:100px;
				height:50px;
				border:1px solid red;*/
			}
		</style>
	</head>

	<body>

		<div class="login-boxtitle">
			<a href="home/demo.html"><img alt="" src="/static/home/images/aishang.png" /></a>
		</div>

		<div class="res-banner" id="kuang">
			<div class="res-main">
				<div class="login-banner-bg"><span></span><img src="/static/home/images/big.jpg" />
				</div>
				<div class="login-box">
					<div class="am-tabs" id="doc-my-tabs">
						<ul class="am-tabs-nav am-nav am-nav-tabs am-nav-justify">
							<li><a href="">手机号注册</a></li>
						</ul>

						<div class="am-tab-panel">
							<form method="post" action="/homeregister/doregister" id="form">
								<div class="user-email" id="zhuce">
									<label for="email"><i class="am-icon-envelope-o"></i></label>
									<input type="text" name="email" id="" placeholder="请输入邮箱账号">
									<span id="email" class="tishi"></span>
		                 		</div>
			                	<div class="user-phone" id="zhuce">
									<label for="phone"><i class="am-icon-mobile-phone am-icon-md"></i></label>
									<input type="text" name="tel" placeholder="请输入手机号">
									<span id="tel" class="tishi"></span>					
			                	</div>															
			                	<div class="user-pass" id="zhuce">
									<label for="password"><i class="am-icon-lock"></i></label>
									<input type="password" name="password" id="password" placeholder="设置密码">
			                		<span id="pwd" class="tishi"></span>									
			                	</div>
			                	<div class="user-pass" id="zhuce">
									<label for="passwordRepeat"><i class="am-icon-lock"></i></label>
									<input type="password" name="repassword" id="passwordRepeat" placeholder="确认密码" id="zhuce">
			                		<span id="repwd" class="tishi"></span>	
			                	</div>
								<div class="verification" id="zhuce">
									<label for="code"><i class="am-icon-code-fork"></i></label>
									<input type="code" name="code" id="code" placeholder="请输入验证码">
									<a href="javascript:void(0)" class="btn" id="ss">获取</a>
									<span id="code" class="tishi"></span>
								</div>
								<div class="am-cf">
									<input type="submit" name="" value="注册" class="am-btn am-btn-primary am-btn-sm am-fl">
								</div>
							</form>
							<hr>
						</div>
						<script>
							$(function() {
							    $('#doc-my-tabs').tabs();
							})
						</script>
					</div>
				</div>
			</div>
		</div>
			
					<div class="footer ">
						<div class="footer-hd "> 
      <p> 
      		<span>友情链接</span> 
      		<a href="# ">百度一下，你就知道 </a> <b>|</b> 
      		<a href="# ">京东</a> <b>|</b> 
      		<a href="# ">淘宝</a> 
      		<a href="# ">ThinkPHP5.0完全开发手册</a> <b>|</b> 
   
      </p> 
     </div> 
     <div class="footer-bd "> 
      <p> <a href="# ">关于爱上零食屋</a>&nbsp&nbsp&nbsp&nbsp&nbsp 
      <a href="# ">合作伙伴</a>&nbsp&nbsp&nbsp&nbsp&nbsp  
      <a href="# ">联系我们</a></p> 
     </div> 
					</div>
	</body>

</html>
<script type="text/javascript">
	EMAIL = false;
	TEL = false;
	PASS = false;
	REPASS = false;
	CODE = false;
	//失去焦点事件
	//邮箱
	$("input[name='email']").blur(function(){
		//获取手机号码
		email=$(this).val();
		// 正则匹配
		// alert(email);
		if(email.match(/^\w+@\w+(\.\w+)$/)==null){
			EMAIL = false;
			$("#email").addClass('cur').html("邮箱格式不符合");
		}else{
			//检测手机号码是否唯一
			//ajax
			$.get("/homeregister/checkemail",{email:email},function(data){
				if(data==1){
					EMAIL = false;
					//号码已经存在
					// alert(data);
					$("#email").addClass('cur').html("邮箱已存在");
				}else{
					EMAIL = true;
					$("#email").addClass('good').html("邮箱可使用");
				}
				// alert(data);
			});
		}
	});
	//手机号码
	$("input[name='tel']").blur(function(){
		//获取手机号码
		tel=$(this).val();
		// 正则匹配
		// alert(tel);
		if(tel.match(/^1[34578]\d{9}$/)==null){
			TEL = false;
			$("#tel").addClass('cur').html("手机号码格式不符合");
		}else{
			//检测手机号码是否唯一
			//ajax
			$.get("/homeregister/checktel",{tel:tel},function(data){
				if(data==1){
					TEL = false;
					//号码已经存在
					// alert(data);
					$("#tel").addClass('cur').html("号码已经注册");
				}else{
					TEL = true;
					$("#tel").addClass('good').html("号码可使用");
				}
			});
		}
	});
	//密码
	$("input[name='password']").blur(function(){
		//获取密码
		password=$(this).val();
		// 正则匹配
		if(password.match(/^\w{6,8}$/)==null){
			PASS = false;
			// alert(0);
			$("#pwd").addClass('cur').html("6-8位数字字母下划线");
		}else{
			// alert(1);
			PASS = true;
			$("#pwd").addClass('good').html("密码可使用");
		}
	});
	//重复密码
	$("input[name='repassword']").blur(function(){
		//获取宠物密码
		repassword=$(this).val();
		password=$("input[name='password']").val();
		if(password!==repassword){
			// alert('1');
			REPASS = false;
			$("#repwd").addClass('cur').html("两次密码不一致");
		}else{
			REPASS = true;
			$("#repwd").addClass('good').html("确认密码");
		}
	});
	//获取验证码
	$("#ss").click(function(){
		o=$(this);
		//获取手机号
		tel=$("input[name='tel']").val();
		// alert(tel);
		//Ajax
		$.get("/homeregister/checkp",{tel:tel},function(data){
			// alert(data);
			// 判断
			if(data.code==000000){
				// alert(data);
				//执行倒计时
				m=60;
				mytime=setInterval(function(){
					m--;
					//赋值给button
					o.html(m+"秒后重新发送");
					//把按钮禁用
					o.attr("disabled",true);
					//判断
					if(m==0){
						//清除定时器
						clearInterval(mytime);
						//赋值button
						o.html("重新发送");
						//按钮激活
						o.attr("disabled",false);
					}
				},1000);
			}
		},'json');
	});
	//校验验证码
	$("input[name='code']").blur(function(){
		//获取输入的校验码
		code = $(this).val();
		//ajax
		$.get("/homeregister/checkcode",{code:code},function(data){
			// alert(data);
			if(data==0){
				CODE = false;
				$("#code").addClass('cur').html('验证码不正确');
			}else if(data==2){
				CODE = false;
				$("#code").addClass('cur').html('验证码过期');
			}else{
				CODE = true;
				$("#code").addClass('good').html("验证码正确");
			}
		});
	});
	//表单提交事件
	$("#form").submit(function(){
		if(TEL && PASS && REPASS && CODE && EMAIL){
			return true;
		}else{
			alert("请完善注册用户信息")
			return false;
		}
	});
</script>